@import "colors";

.wg-page-header {
  background-color: #ffffff;
  position: relative;
  padding-bottom: 30px;
  overflow: hidden;
  margin-bottom: -80px;
  &::before {
    @extend .gradient-header;
    position: absolute;
    content: '';
    bottom: 80px;
    width: 100%;
    height: 100%;
  }
  &::after {
    position: absolute;
    content: '';
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 120%;
    box-shadow: inset 0 0 20px 10px fade-out(darken($mosaic-navy, 5%), 0.5), 0 0 40px 10px fade-out(#d9ced7, 0.2);
    border-bottom: 2px solid #d9ced7;
  }

  & > .container {
    position: relative;
    z-index: 1;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #fff;
  }

  hr {
    opacity: 0;
  }

  .page-header-background {
    position: absolute;
    content: '';
    bottom: 80px;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom right;
  }

  // Logo and title aligned left (Home page)
  .alignment-left {
    padding-top: 2.3rem;
    padding-bottom: 2.5rem;
    .page-header-logo {
      img {
        max-width: none;
        margin: -4.49rem 0 -2.8rem -2.27rem;
      }
    }
    .section-heading {
      margin-left: 9.22rem;
      p {
        color: #fff;
        font-style: normal;
        font-size: 1.05rem;
      }
    }
    .buttons {
      margin-bottom: 0;
      a.mosaic-btn {
        margin-top: 0;
        margin-bottom: 0.7rem;
        padding: 0.4rem 1.2rem;
        min-width: 9.7rem;
        text-align: left;
        margin-right: -0.7rem;
        font-size: 0.8rem;
        &.mosaic-btn-subtitle {
          &:hover {
            .subtitle {
              color: white;
            }
          }
          .title-wrap {
            float: left;
          }
          .i {
            padding-top: 10px;
          }
          .subtitle {
            display: block;
            font-weight: normal;
            font-size: 0.6rem;
            margin: -0.3rem 0 -0.3rem 0;
            color: #666;
          }
          .title {
            display: block;
            margin: -0.4rem 0 -0.35rem 0;
          }
        }
        i {
          font-size: 1.1rem;
          height: 0;
          padding-top: 3px;
          float: left;
        }
      }
    }
  }
  .features {
    margin-left: -15px;
    max-width: calc(100% + 30px);
    width: calc(100% + 30px);
  }

  // Logo and title aligned center
  .alignment-center {
    .section-heading {
      h1 {
        font-size: 1.8rem;
      }
      p {
        color: #fff;
        font-size: 1rem;
      }
    }
  }

  .buttons {
    .button {
      text-align: center;
      a.mosaic-btn {
        margin: 0 0.5rem;
      }
    }
  }

  .features .feature {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    .feature-inner {
      @extend .gradient-white-darken;
      background-color: #fff;
      width: 100%;
      color: #424b5f;
      padding: 1.4rem 1.4rem 2.3rem 1.4rem;
      border: 0;
      overflow: hidden;
      height: 100%;
      border-radius: 1rem;
      box-shadow: 0.4rem 0.5rem 0.5rem rgba(45, 44, 47, 0.2);
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      position: relative;

      &.is-linked-feature:hover {
        transform: scale(1.04);
        background-image: none;
        box-shadow: 0 10px 20px -10px fade-out($color: $mosaic-navy, $amount: 0.2);
        p.feature-link {
          background-image: linear-gradient(-45deg, #872E51 0%, #F88D2B 210%);
        }
      }

      h3 {
        margin-top: 0;
        font-size: unset;
        color: $mosaic-navy;
        i {
          font-size: 0.8rem;
          margin-right: 0.3rem;
        }
      }

      a.linked-feature {
        color: #424b5f;
        text-decoration: none;
        margin: 0;
        padding: 0;
        p {
          font-weight: normal;
        }
      }

      p {
        font-size: medium;
        &.feature-link {
          background-image: linear-gradient(-45deg, #57114d -30%, #751667 40%);
          color: #fff;
          margin: 1rem -1.4rem -1.4rem;
          padding: 0.4rem 1.4rem 0.5rem;
          border-top: 1px solid #d5c4d3;
          text-decoration: none;
          font-weight: bold !important;
          font-size: medium;
          transition: all 0.2s ease;
          -webkit-transition: all 0.2s ease;
          position: absolute;
          bottom: 0;
          left: 29px;
          right: 29px;
          margin-bottom: 0;

          &::before {
            content: "» ";
            font-size: larger;
            color: #fff;
            transition: all 0.2s ease;
            -webkit-transition: all 0.2s ease;
          }
        }
      }

      a.feature-link:hover {
        color: $mosaic-navy;
        &::before {
          padding-right: 3px;
        }
      }
    }
  }
}

@media screen and (max-width: 576px) {
  .wg-page-header .alignment-left {
    .page-header-logo img {
      max-width: none;
      margin: -4.49rem 0 -2.8rem -2.1rem;
      width: 120%;
    }

    .section-heading {
      margin-left: 0;
      width: 100%;
      padding: 2rem 1.5rem 0;
      text-align: center !important;
      p {
        font-size: 1.15rem;
        margin-bottom: 0;
      }
    }
  }
}

body.page-community,
body.page-home {
  .wg-page-header {
    margin-bottom: 0;
    padding-bottom: 3rem;
  }
}
body.page-community,
body.page-home {
  .wg-page-header {
    padding-bottom: 3.3rem;
  }
}
body.page-home .page-header {
  margin-bottom: -1.9rem;
}
body.page-community .wg-page-header .page-header {
  margin-bottom: -2.87rem;
}

@media screen and (max-width: 576px) {
  .wg-page-header {
    padding-bottom: 4rem !important;
  }
}
@media screen and (max-width: 960px) {
  .wg-page-header .features .feature .feature-inner p.feature-link {
    left: 15px;
    right: 15px;
  }
}
